<template>
  <div class="user-list">
    <el-row :gutter="20">
      <!-- 部门数据 -->
      <el-col :span="4" :xs="24">
        <div style="margin-top: 20px">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!-- 用户数据 -->
      <el-col :span="20" :xs="24">
        <!-- 搜索 -->
        <el-form
          size="small"
          :inline="true"
          v-show="showSearch"
          @submit.native.prevent
          style="margin-left: 200px; margin-top: 18px; float: left"
        >
          <el-form-item label="">
            <el-input
              v-model="keyword"
              placeholder="输入姓名或部门"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table
          :data="
            userData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
          "
          :header-cell-style="{
            color: '#515a6e',
            'font-size': '15px',
            background: '#f8f8f9',
          }"
          @sort-change="sortChange"
          :cell-style="{ padding: '9px' }"
        >
          <el-table-column prop="userName" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="userId" label="工号" align="center">
          </el-table-column>
          <el-table-column prop="deptName" label="隶属部门" align="center">
          </el-table-column>
          <el-table-column prop="leaderName" label="负责人" align="center">
          </el-table-column>
          <el-table-column prop="accessTime" label="访问小时数" align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="注册时间"
            align="center"
            width="180px"
            sortable="custom"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <!-- 点击详情跳转 -->
              <el-button
                @click="onUserDetails(scope.$index, userData)"
                type="text"
                size="mini"
                icon="el-icon-s-data"
                >详情</el-button
              >
              <!-- 更多 -->
              <el-dropdown
                size="mini"
                @command="(command) => handleCommand(command, scope.row)"
                style="cursor: pointer"
              >
                <span class="el-dropdown-link">
                  <i class="el-icon-d-arrow-right el-icon--right"></i>更多
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    command="handleUnsubscribe"
                    icon="el-icon-delete"
                    >注销账号</el-dropdown-item
                  >
                  <el-dropdown-item command="handleReset" icon="el-icon-key"
                    >重置密码</el-dropdown-item
                  >
                  <el-dropdown-item command="handleChange" icon="el-icon-edit"
                    >更改账号职级权限</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <div class="main-pagination">
      <el-pagination
        style="float: right; margin-top: 20px"
        background
        prev-text="<"
        next-text=">"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userData.length"
      >
      </el-pagination>
    </div>
    <!-- 用户详情对话框 -->
    <div class="docBox">
      <el-dialog title="用户详情" :visible.sync="detailsVisible" width="40%">
        <template>
          <el-descriptions class="margin-top" :column="2" size="">
            <el-descriptions-item label="姓名">{{
              detailsData.userName
            }}</el-descriptions-item>
            <el-descriptions-item label="账号职级">
              <span v-if="detailsData.userType == -1">离职</span>
              <span v-if="detailsData.userType == 0">游客</span>
              <span v-if="detailsData.userType == 1">员工</span>
              <span v-if="detailsData.userType == 2">部门负责人</span>
              <span v-if="detailsData.userType == 3"
                >超级管理员</span
              ></el-descriptions-item
            >
            <el-descriptions-item label="工号">
              {{ detailsData.userId }}
            </el-descriptions-item>
            <el-descriptions-item label="隶属部门">
              {{ detailsData.deptName }}</el-descriptions-item
            >
            <el-descriptions-item label="性别">
              {{ detailsData.sex }}
            </el-descriptions-item>
            <el-descriptions-item label="部门负责人">
              {{ detailsData.leaderName }}
            </el-descriptions-item>
            <el-descriptions-item label="账号昵称">
              {{ detailsData.nickName }}
            </el-descriptions-item>
            <el-descriptions-item label="注册时间">
              {{ detailsData.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="出生日期">
              {{ detailsData.birthday }}
            </el-descriptions-item>
            <el-descriptions-item label="访问时长">
              {{ detailsData.accessTime }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号码">
              {{ detailsData.phonenumber }}
            </el-descriptions-item>
            <el-descriptions-item label="最后访问时间">
              {{ detailsData.loginDate }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
              {{ detailsData.email }}
            </el-descriptions-item>
            <el-descriptions-item label="最后访问IP属地">
              {{ detailsData.loginIp }}
            </el-descriptions-item>
          </el-descriptions>
          <!-- <el-form label-position="right" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名">
                  {{ detailsData.userName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账号职级">
                  <span v-if="detailsData.userType == -1">离职</span>
                  <span v-if="detailsData.userType == 0">游客</span>
                  <span v-if="detailsData.userType == 1">员工</span>
                  <span v-if="detailsData.userType == 2">部门负责人</span>
                  <span v-if="detailsData.userType == 3">超级管理员</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工号">
                  {{ detailsData.userId }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="隶属部门">
                  {{ detailsData.deptName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="性别">
                  {{ detailsData.sex }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门负责人">
                  {{ detailsData.leaderName }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="账号昵称">
                  {{ detailsData.nickName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注册时间">
                  {{ detailsData.createTime }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出生日期">
                  {{ detailsData.birthday }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="访问时长">
                  {{ detailsData.accessTime }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="手机号码">
                  {{ detailsData.phonenumber }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最后访问时间">
                  {{ detailsData.loginDate }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="邮箱">
                  {{ detailsData.email }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最后访问IP属地">
                  {{ detailsData.loginIp }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form> -->
        </template>
      </el-dialog>
    </div>
    <!-- 更改账号职级权限 -->
    <el-dialog
      :visible.sync="changeVisible"
      :show-close="false"
      :modal-append-to-body="false"
      class="changeType"
      ><br /><br /><br />
      <div class="selectBox-change">
        部门:
        <el-select v-model="value1">
          <el-option
            v-for="item in deptSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <br /><br /><br /><br /><br />
      <div class="selectBox-change">
        职级:
        <el-select v-model="value2">
          <el-option
            v-for="item in rankSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeRank" class="btn-confirm-change"
          >确 定</el-button
        >
        <el-button
          type="warning"
          @click="changeVisible = false"
          class="btn-cancel-change"
          >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getUserData,
  searchUserData,
  deleteUser,
  onlyResetPwd,
  modifyUserType,
  treeselect,
  getDeptNameList,
} from "@/api/manage/userManage";
export default {
  inject: ["reload"],
  data: function () {
    return {
      userId: this.$store.getters.userId,
      userName: this.$store.getters.userName,
      dept: this.$store.getters.userDept,
      getTime: "",
      fileId: undefined,
      keyword: undefined,
      deptName: undefined,
      showSearch: true,
      detailsVisible: false,
      browseVisible: false,
      downloadVisible: false,
      changeVisible: false,
      value1: "",
      value2: "",
      currentPage: 1,
      pageSize: 10,
      defaultProps: {
        children: "children",
        label: "label",
      },
      deptOptions: [
        {
          label: "若伊科技",
          children: [
            {
              label: "深圳总公司",
              children: [
                {
                  label: "研发部门",
                },
                {
                  label: "市场部门",
                },
                {
                  label: "测试部门",
                },
              ],
            },
          ],
        },
      ],
      userData: [
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "四",
          userId: 8,
          deptName: "x门",
          leaderName: "三",
          accessTime: "3小时",
          createTime: "2020-7-11 16:34:32",
          phonenumber: 1984985546,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 2,
        },
        {
          userName: "李四",
          userId: 1218,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 1213,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 1138,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李四",
          userId: 1238,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
        {
          userName: "李",
          userId: 128,
          deptName: "xx部门",
          leaderName: "张三",
          accessTime: "763小时",
          createTime: "2021-7-11 16:34:32",
          phonenumber: 1235646,
          sex: "男",
          birthday: "1999-01-01",
          nickName: "大白",
          email: "54849746@qq.com",
          loginDate: "2022-5-1 21:56:14",
          loginIp: "58.32.114.127",
          userType: 1,
        },
      ],
      detailsData: {
        userId: undefined,
        fileId: "",
        abandonReason: null,
        abandonDept: null,
        abandonTime: null,
      },
      browseData: [
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
      ],
      downloadData: [
        {
          userId: 1,
          name: "王五",
          dept: "xxx部门",
          leader: "白某",
          time: "2021-7-20  18:06:13",
        },
      ],
      //下拉选择
      rankSelect: [
        {
          value: "游客",
          label: "游客",
        },
        {
          value: "员工",
          label: "员工",
        },
        {
          value: "部门负责人",
          label: "部门负责人",
        },
      ],
      deptSelect: [
        {
          value: "数据管理事业部",
          label: "数据管理事业部",
        },
        {
          value: "数据运营事业部",
          label: "数据运营事业部",
        },
        {
          value: "企业管理事业部",
          label: "企业管理事业部",
        },
        {
          value: "部门1",
          label: "部门1",
        },
        {
          value: "部门2",
          label: "部门2",
        },
        {
          value: "部门3",
          label: "部门3",
        },
        {
          value: "部门4",
          label: "部门4",
        },
        {
          value: "总部",
          label: "总部",
        },
      ],
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.getTreeselect();
    this.getUserList();
    this.getDeptSelect();
  },
  methods: {
    getDeptSelect() {
      getDeptNameList().then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          this.deptSelect[i]={value: res.data[i],label: res.data[i]}
        }
        console.log(this.deptSelect);
      });
    },
    getUserList() {
      let data = {
        userId: this.userId,
      };
      getUserData(data).then((res) => {
        this.userData = res.data;
      });
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.keyword = data.label;
      this.handleQuery();
    },

    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleReset":
          this.handleReset(row);
          break;
        case "handleChange":
          this.handleChange(row);
          break;
        case "handleUnsubscribe":
          this.handleUnsubscribe(row);
          break;
        default:
          break;
      }
    },
    handleChange(row) {
      this.detailsData = row;
      this.changeVisible = true;
    },
    //改变职级 +-+ ✔
    changeRank() {
      this.getCurrentTime();
      let data = {
        userId: this.detailsData.userId,
        deptName: this.value1,
        userType: this.value2,
        oprtId: this.userId,
        time: this.getTime,
      };
      console.log(data);
      let body = JSON.stringify(data);
      modifyUserType(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.changeVisible = false;
            this.change();
            console.log("成功");
            this.$message({
              type: "success",
              message: "更改成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "改变职级失败",
          });
          console.log(e);
        });
    },
    //重置密码框
    async handleReset(row) {
      this.detailsData = row;
      const url = require("@/assets/image/manage/warn.png");
      const confirmRes = await this.$confirm(
        "<img src=" +
          url +
          `><p style="margin-top:60px;">您确定要将 
      ${this.detailsData.deptName} ${this.detailsData.userId}号 ${this.detailsData.userName}<br><span style="color:red">重置密码</span>吗？</p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-unsubscribe",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-cancel-unsubscribe",
          confirmButtonClass: "btn-confirm-unsubscribe",
          center: true,
          showClose: false,
          type: "warning",
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.reset();
      }
    },
    //重置密码请求 +-+ ✔
    reset() {
      this.getCurrentTime();
      let data = {
        oprtId: this.userId,
        userId: this.detailsData.userId,
        time: this.getTime,
      };
      console.log(data);
      let body = JSON.stringify(data);
      // axios
      onlyResetPwd(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.resetSuccess();
            console.log("成功");
            this.$message({
              type: "success",
              message: "重置密码成功",
            });
          } else console.log("失败");
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "重置密码失败",
          });
          console.log(e);
        });
      console.log("提交重置密码请求");
      //this.resetSuccess();
    },
    //重置密码成功
    async resetSuccess() {
      const confirmRes = await this.$alert(
        `<p>${this.detailsData.deptName} 员工 ${this.detailsData.userId}号 ${this.detailsData.userName}账号密码重置成功！
      <br>初始密码为：<span style="font-weight:bold;">123456</span></p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-reset",
          confirmButtonText: "确定",
          confirmButtonClass: "btn-confirm-reset",
          center: true,
          showClose: false,
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.change();
      }
    },
    //注销账号请求 +-+ ✔
    unsubscribe() {
      this.getCurrentTime();
      let data = {
        userId: this.detailsData.userId,
        oprtId: this.userId,
        time: this.getTime,
      };
      console.log(data);
      let body = JSON.stringify(data);
      // axios
      deleteUser(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.$message({
              type: "success",
              message: "注销成功",
            });
            console.log("成功");
          } else console.log("失败");
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "注销失败",
          });
          console.log(e);
        });
      console.log("提交注销请求");
    },
    //注销账号框
    async handleUnsubscribe(row) {
      this.detailsData = row;
      const url = require("@/assets/image/manage/warn.png");
      const confirmRes = await this.$confirm(
        "<img src=" +
          url +
          `><p style="margin-top:60px;">您确认要<span style="color:red">注销</span>
      ${this.detailsData.deptName} ${this.detailsData.userId}号<br>${this.detailsData.userName}的ESDN账号吗？</p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-unsubscribe",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-cancel-unsubscribe",
          confirmButtonClass: "btn-confirm-unsubscribe",
          center: true,
          showClose: false,
          type: "warning",
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.unsubscribe();
      }
    },
    /** 查询用户列表 */
    getList() {
      let data = {
        keyword: this.keyword,
        userId: this.userId,
      };
      // axios
      searchUserData(data)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.userData = res.data;
            console.log(this.keyword)
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "搜索失败",
          });
          console.log(e);
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.currentPage = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.keyword = '';
      this.handleQuery();
    },
    //打开详情
    onUserDetails(index, rows) {
      index = (this.currentPage - 1) * this.pageSize + index;
      this.detailsData = rows[index];
      this.detailsVisible = true;
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    sortChange({ prop, order }) {
      this.userData.sort(this.compare(prop, order));
    },
    compare(propertyName, sort) {
      return function (obj1, obj2) {
        var value1 = obj1[propertyName];
        var value2 = obj2[propertyName];
        if (typeof value1 === "string" && typeof value2 === "string") {
          const res = value1.localeCompare(value2, "zh");
          return sort === "ascending" ? res : -res;
        } else {
          if (value1 <= value2) {
            return sort === "ascending" ? -1 : 1;
          } else if (value1 > value2) {
            return sort === "ascending" ? 1 : -1;
          }
        }
      };
    },
    //获取时间
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.getTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      console.log(_this.getTime);
    },
    change() {
      // 页面逻辑执行完毕后调用reload方法
      console.log("刷新");
      this.reload();
    },
  },
};
</script>
<style lang="less">
.messageBox-unsubscribe {
  width: 400px !important;
  height: 400px !important;
  border: 4px solid orange !important;
  background-color: whitesmoke !important;
  .el-message-box__header {
    padding-top: 0 !important;
  }
  .el-message-box__status.el-icon-warning {
    display: none;
  }
  .el-message-box__message p {
    text-align: center;
    color: black;
    margin-top: 20px;
    font-size: 22px !important;
    font-weight: 400 !important;
  }
}
.btn-cancel-unsubscribe {
  float: right !important;
  margin-right: 30px !important;
  margin-top: 100px !important;
  width: 140px !important;
  height: 40px !important;
  line-height: 5px !important;
  background-color: orange !important;
  color: white !important;
  font-size: 16px !important;
}
.btn-confirm-unsubscribe {
  margin-right: 20px !important;
  margin-top: 100px !important;
  width: 140px !important;
  height: 40px !important;
  line-height: 5px !important;
  font-size: 16px !important;
}
.messageBox-reset {
  width: 800px !important;
  height: 500px !important;
  background-color: whitesmoke !important;
  .el-message-box__header {
    padding-top: 100px !important;
  }
  .el-message-box__status.el-icon-warning {
    display: none;
  }
  .el-message-box__message p {
    text-align: center;
    color: black;
    margin-top: 20px;
    font-size: 22px !important;
    font-weight: 400 !important;
  }
}
.btn-confirm-reset {
  margin-right: 20px !important;
  margin-top: 100px !important;
  width: 140px !important;
  height: 60px !important;
  line-height: 5px !important;
  font-size: 16px !important;
}
.user-list {
  .docBox {
    .el-form-item {
      margin-bottom: 15px;
    }
    .el-form-item__label {
      font-weight: bolder;
    }
    .el-form-item__content {
      text-align: left;
    }
  }
  .el-row {
    margin-left: 0px !important;
  }
  .el-dropdown {
    color: #409eff;
    font-size: 12px;
  }
  .main-pagination {
    position: absolute;
    bottom: 20px;
    right: 50px;
  }
  .changeType {
    .el-dialog {
      border: 1px solid rgba(121, 121, 121, 1);
      width: 580px;
      height: 450px;
      background-color: whitesmoke;
      box-shadow: none;
    }
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__footer {
      margin-top: 50px;
    }
  }
  .btn-cancel-change {
    margin-right: 100px !important;
    width: 140px !important;
    height: 40px !important;
    line-height: 5px !important;
    background-color: orange !important;
    color: white !important;
  }
  .btn-confirm-change {
    margin-right: 50px !important;
    width: 140px !important;
    height: 40px !important;
    line-height: 5px !important;
  }
}
</style>
<style scoped>
.selectBox-change {
  font-weight: 700;
  font-style: normal;
  font-size: 25px;
  color: #333333;
}
</style>
